<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="root">
    {{title}} {{count}} {{doubleCount1}} {{count2}}
    <button @click="handleClick">click</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#root',

      data: {
        count: 1,
        title: 'hello',
        count2: 0,
        watchData: {
          a: 1,
          b: 2,
          c: 3,
          d: 4,
          e: {
            f: {
              g: 5
            }
          }
        }
      },

      computed: {
        // 计算属性：根据依赖缓存
        doubleCount1() {
          console.log('computed run...')
          return this.count * 2
        }
      },

      methods: {
        // doubleCount2() {
        //   console.log('methods run...')
        //   return this.count * 2
        // }

        // 事件的回调
        handleClick() {
          // this.loadData()
          this.$options.myFoo.call(this)
        },

        // 函数的封装
        loadData() {
          return fetch('http://localhost:8080/api/movies/list')
            .then(response => response.json())
            .then(result => {
              return result
            })
        },

        hybridData(val) {
          // let result = await this.loadData()
          // let result = await this.loadData()
          // return this.count + result.data[0].showst

          console.log(val)
        }
      },

      // 监听一个vm上的属性的值的变化，执行一段逻辑，一般不返回值
      watch: {
        count: {
          async handler(newValue) {
            let result = await this.loadData()
            let newCount = newValue + result.data[0].showst
            this.count2 = newCount
          },
          immediate: true
        }

        // vue实例上的数据（属性）
        // count(newValue, oldValue) {
        //   console.log(newValue, oldValue)
        // }

        // count: {
        //   handler(val) {
        //     // console.log(val)
        //   },
        //   immediate: true
        // },
        // watchData: {
        //   handler(val) {
        //     console.log(val)
        //   },
        //   immediate: true, // 立即观察
        //   // deep: true // 深度观察
        // },

        // title: [
        //   function(newVal) {
        //     console.log(newVal)
        //   },
        //   function(newVal) {
        //     console.log(newVal)
        //   }
        // ],

        // 'watchData.a'(val) {
        //   console.log('-------')
        //   console.log(val)
        // }
      },

      mounted() {
        // this.doubleCount = this.count * 2
      },

      myFoo() {
        console.log(this.title)
      }
    })
  </script>
</body>
</html>